
//全局变量，用于存储选中要展示的图表
var checkedlist = []
var allchart = ["left111","left222","left333","left444","left555","left666",
                "middle111","middle222","middle333","middle444","middle555","middle666",
                "right111","right222","right333","right444","right555","right666"];

(function(){
    //为所有的复选框input添加click函数，这里不需要传递event，这种触发方式和写在标签中onclick="getCheckedList(event)"效果一样
    $(".dropdown-menu li input").on("click",getCheckedList)
})();

//每选择一个图表，就将其加入选择（checkedlist）的队列
function getCheckedList(){
    //点击选择框input触发该函数

    //dom是input标签
    var dom = this
    let state = $(dom).prop("checked")
    if(state){
        checkedlist.push($(dom).val())
        $(dom).parent().addClass("bg-primary")
    }else{
        let index = checkedlist.indexOf($(dom).val())
        checkedlist.splice(index,1)
        $(dom).parent().removeClass("bg-primary")
    }
    console.log(checkedlist)
}

//显示选择的图表，其余的隐藏
function showSelectedChart(){
    //想让选择的这几个图表从左到右哦从上到下整齐的显示出来。可以交换图表节点，或者是利用float显示
    //1.交换：例如把要显示的第一个图标和左侧的第一个图标交换，把要显示的第二个图标和左侧的第二个图标交换...
    //交换完后再把不需要展示的隐藏起来
    //2.float：利用float浮动特性，从左到右浮动排序，每一行排列3个图表即可

    console.log("你选择要展示的图表如下："+checkedlist)
    checkedlist.forEach(item=>{
        
    })

    allchart.forEach(item=>{
        if(checkedlist.indexOf(item)==-1){
            console.log(item+"没有被选择，所以不展示")
            $("#"+item+"C").css({"display":"none"})
        }else{
            console.log(item+"被选择，所以需要显示")
            $("#"+item+"C").css({"display":"block"})
        }
    })
}

//显示所有图表
function showAllChart(){
    allchart.forEach(item=>{
        console.log(item+"被选择，所以需要显示")
        $("#"+item+"C").css({"display":"block"})
    })
}

//点击label文字时也改变复选框和的状态父元素li标签的css
(function(){

    $("label").on("click",function(event){
        //$(event.target).siblings("input")获取兄弟元素input
        var brother = $(event.target).siblings("input")
        //其父元素是li标签
        var parent = $(event.target).parent()
        if(brother.prop("checked")){
            //如果已经选择
            brother.prop({"checked":false})
            parent.removeClass("bg-primary")
            //从checkedlist中移除
            let index = checkedlist.indexOf(brother.val())
            checkedlist.splice(index,1)

        }else{
            //如果还未选择
            brother.prop({"checked":true})
            parent.addClass("bg-primary")
            //添加到checkedlist中
            checkedlist.push(brother.val())
        }
        //阻止冒泡事件，防止触发li的click事件而导致下拉框收起
        event.stopPropagation();
        console.log(checkedlist)
        
    })
})();